<template>
  <div>
		<SubmitPay :payContent="payContent"></SubmitPay>
		<el-space>
			<el-date-picker
				v-model="params.registDate"
				value-format="YYYY-MM-DD"
				@change="getTableData"></el-date-picker>
			<el-select
				style="width: 180px"
				v-model="params.active"
				@change="getTableData">
				<el-option :value="''" label="全部"></el-option>
				<el-option :value="1" label="已挂号"></el-option>
				<el-option :value="2" label="已缴费"></el-option>
				<el-option :value="3" label="已退费"></el-option>
			</el-select>
		</el-space>
		<el-table style="margin-top: 20px;" :data="tableData" border>
			<el-table-column label="患者姓名" prop="name"></el-table-column>
			<el-table-column label="性别" prop="gender"></el-table-column>
			<el-table-column label="年龄" prop="age"></el-table-column>
			<el-table-column label="手机号">
				<template #default="scope">
					<span>{{getPhone(scope.row.phone)}}</span>
				</template>
			</el-table-column>
			<el-table-column label="科室" prop="deptName"></el-table-column>
			<el-table-column label="医生" prop="doctorName"></el-table-column>
			<el-table-column label="挂号费" prop="price">
				<template #default="scope">
					<span>{{scope.row.price / 100}}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template #default="scope">
					<span v-if="scope.row.active === 1">已挂号</span>
					<span v-else-if="scope.row.active === 2">已缴费</span>
					<span v-else>已退费</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						v-if="scope.row.active === 1"
						@click="pay(scope.row.registerNo, scope.row.price / 100)"
						size="small"
						plain
						type="primary">缴费</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import SubmitPay from '@@/submitPay'
import { ref, reactive } from 'vue'
import { get, post } from '@/axios'
import dayjs from 'dayjs'
import { getPhone } from '@/util'
const payContent = ref('')
const tableData = ref([])
const params = reactive({
	registDate: dayjs().format('YYYY-MM-DD'),
	active: ''
})

getTableData()
function getTableData () {
	get('/pmsRegist/list', params, content => {
		tableData.value = content
		console.dir(content)
	})
}

function pay (registerNo, price) {
	post('/pmsRegist/pay', { out_trade_no: registerNo, total_amount: price }, content => {
		payContent.value = content
	})
	
}
</script>

<style scoped lang="scss">
</style>